<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.List" %>
<%@ page import="entity.ImageItem" %>
<%@ page import="util.ItemHelper" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<link type="text/css" rel="stylesheet" href="stylesheets/browser.css" />
		<script type="text/javascript" src="scripts/browser.js"></script>
		<title>Img Battle</title>
		<%
			String url = request.getParameter("url");
			ImageItem item = url == null ? null : ImageItem.get(url);	
			
			String tag = request.getParameter("tag");
			System.out.println("tag: '" + tag + "', leave out: '" + item + "'");
			
			List<ImageItem> imgList = null;
			if (item != null) {
				imgList = ItemHelper.getRandomItems(9, tag, item);
				imgList.add(0, item);
			}
			else {
				imgList = ItemHelper.getRandomItems(10, tag);
			}
		%>
		<script type="text/javascript">
			<%
			if (tag != null) {%>
				var tag = '<%= tag %>';
			<%}
			else {%>
				var tag = null; 
			<%}
			%>
		
			var imageList = [];
			<%
				for (ImageItem thumb : imgList) { %>
					var tags = '';
					<%
						List<String> tags = thumb.getTags();
						for (int i=0; i < tags.size(); i++) {
							if(i == 0) {%>
								tags = '<%= tags.get(i) %>';
							<%}
							else {%>
								tags += ', <%= tags.get(i) %>';
							<%}
						}
					%>
					imageList.push({
						url : '<%= thumb.getUrl() %>',
						rating : <%= thumb.getRating() %>,
						title : "<%= thumb.getTitle() %>",
						user : '<%= thumb.getUser() %>',
						tags : tags
					});
				<%}
			%>
		</script>
	</head>
	<body>
		<div id='top-pane'>
			<a href='battle.jsp' id='back-button'>Back To Battle</a>
			<div id='title'>Browse Images</div>
			<select id='category-select'>
				<option value="all">All Tags</option>
				<option value="cat">Cats</option>
				<option value="dog">Dogs</option>
				<option value="bird">Birds</option>
				<option value="human">Humans</option>
				<option value="pets">Pets</option>
				<option value="wildlife">Wildlife</option>
			</select>
			<a id='upload' href='upload.jsp'>
				<div id='plus'></div>
				<div id='upload-text'>Upload An Image</div>
			</a>
		</div>
		<div id='bottom-pane'>
			<div id='battle-pane'>
				<div id='main-image'>
					<div id='main-image-holder'>
						<img class='battle-img'></img>
					</div>
					<div id='image-info-wrapper'>
						<table id='image-info'>
						</table>
					</div>
				</div>
			</div>
			<div id='last-battle-pane'>
				<div class='section'>
					<div class='section-header'>More Images In This Category</div>
					<table id='last-battle'>
						<tr id='thumb-table'></tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>